<template>
  <el-card :body-style="{ padding: '0px' }" shadow="hover" class="movie-card">
    <router-link :to="'/movie/' + movie.id">
      <img :src="movie.poster_image" class="movie-poster" />
      <div style="padding: 14px">
        <span class="movie-title">{{ movie.title }}</span>
        <div class="bottom">
          <span class="movie-rating">评分: {{ movie.rating || '暂无' }}</span>
        </div>
      </div>
    </router-link>
  </el-card>
</template>

<script setup>
// P4: 定义组件接收一个名为 'movie' 的 prop
defineProps({
  movie: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.movie-card {
  width: 200px;
  margin: 10px;
  cursor: pointer;
}
.movie-poster {
  width: 100%;
  height: 280px; /* 固定高度 */
  object-fit: cover; /* 保持比例 */
  display: block;
}
.movie-title {
  font-weight: bold;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.movie-rating {
  font-size: 13px;
  color: #faaf00;
  font-weight: bold;
}
.bottom {
  margin-top: 10px;
}
/* P4: 去除 router-link 的默认下划线 */
a {
  text-decoration: none;
  color: inherit;
}
</style>